import { useEffect, useRef, useState } from "react";
import "../../page/home/index.css"
import Lunbo from "../../components/lunbo/lunbo"
import { BrowserRouter, Link, Route, Routes, NavLink } from "react-router-dom";
import Chaoshi from "../../page/chaoshi/index"
import JDBaihuo from "../../page/jdbaihuo/index"
import { findAll } from "../../api/student.js"
import { Table, Pagination } from 'antd';
function Home() {
    let [list] = useState([
        {
            img: require("../../assets/img/1京东超市.png"),
            path: "/chaoshi",
            name: "京东超市"
        },
        {
            img: require("../../assets/img/2京东电器.png"),
            path: "/dianqi",
            name: "京东电器"
        },
        {
            img: require("../../assets/img/3京东新百货.png"),
            path: "/jdbaihuo",
            name: "京东新百货"
        },
        {
            img: require("../../assets/img/4京东生鲜.png"),
            name: "京东生鲜"
        },
        {
            img: require("../../assets/img/5京东到家.png"),
            name: "京东超市"
        },
        {
            img: require("../../assets/img/1京东超市.png"),
            name: "京东超市"
        },
        {
            img: require("../../assets/img/1京东超市.png"),
            name: "京东超市"
        },
        {
            img: require("../../assets/img/1京东超市.png"),
            name: "京东超市"
        }

    ])

    function gotopage(url) {


        //    console.log(url);
    }

    let mapList = list.map((item, i) => (
        <div key={i} >
            <NavLink to={item.path}>
                <div><img src={item.img} title="" alt=""></img></div>
                <div>{item.name}</div>
            </NavLink>
        </div>
    ))
    let [dataSource, setDataSource] = useState([])
    let [totalCount, setTotalCount] = useState(0);
    let [page, setPage] = useState(1);
    const [tableParams, setTableParams] = useState({
        pagination: {
            current: 1,
            pageSize: 10,
            total: 0
        },
    });
    let [limit, setLimit] = useState(10);
    const columns = [
        {
            title: '编号',
            width: 100,
            dataIndex: 'id',
            key: 'id',
            fixed: 'left',
        },
        {
            title: '姓名',
            width: 100,
            dataIndex: 'name',
            key: 'name',
            fixed: 'left',
            sorter: true,
        },
        {
            title: '性别',
            dataIndex: 'sex',
            key: 'sex',
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
        },
        {
            title: '状态',
            dataIndex: 'enable',
            key: 'enable',
        },
        {
            title: '操作',
            key: 'operation',
            fixed: 'right',
            width: 100,
            render: () => <div><a>编辑</a><a>删除</a></div>,
        },
    ];
    async function getFindAllData() {

        const res = await findAll({ page: page, limit: limit })
        setDataSource(res.data.data);
        setTotalCount(res.data.count)

    }
    useEffect(() => {
        getFindAllData()

    }, [])
    async function onChange(page, pageSize) {
        console.log(page, pageSize);
        setPage(page);
        setLimit(pageSize)

        const res = await findAll({ page: page, limit: pageSize })
        setDataSource(res.data.data);
        setTotalCount(res.data.count)

    }

    return (
        <div className="home">

            <Lunbo></Lunbo>
            {/* <Routes> */}
            {/* <Route path="/chaoshi" element={<Chaoshi />}></Route> */}
            {/* <Route path="/jdbaihuo" element={<JDBaihuo />}></Route> */}
            {/* </Routes> */}
            <div className="nav">
                {
                    mapList
                }
            </div>
            <Table
                dataSource={dataSource}
                columns={columns}
                pagination={false}
            />
            <Pagination
                total={totalCount}
                showSizeChanger
                showQuickJumper
                defaultCurrent={1}
                defaultPageSize={10}
                pageSize={limit}
                showTotal={(total) => `总共 ${total} 条`}
                pageSizeOptions={[10, 20]}
                onChange={onChange}
                current={page}
            />
        </div>
    );
}

export default Home;
// import React from "react"
// class Home extends React.Component {
//     constructor() {
//         super();
//         this.state = {
//             name: "张三",
//             age: 18
//         }
//     }

//     async updateName() {
//         await
//             this.setState({
//                 name: document.getElementById("username").value
//             })
//         console.log(this.state.name);
//     }

//     render() {
//         return (
//             <div>
//                 首页{this.state.name}
//                 <input type="text" id="username"></input>
//                 <button onClick={() => { this.updateName() }}>我是按钮</button>
//             </div>
//         )

//     }

// }

// export default Home